Hover is a promise

A hover state is the only part of an interface that speaks before you commit. It is a promise, made in a hundred milliseconds, about what a click will do. And most of the hover states I see are promising the wrong thing.

The common failure is decoration. A card lifts, a shadow blooms, a background fades from one grey to a slightly different grey. Something happened, so the element must be alive. But nothing was said. The visitor learns that the thing is clickable, which they already suspected, and nothing else.

Say what the click does

The good hover states I keep returning to all answer a question. A file row that reveals its full path. A link that shows the domain it is about to leave for. A list item that surfaces the thumbnail you would otherwise have to load the page to see. In each case the hover is not saying I am clickable. It is saying here is what is on the other side.

This is why I keep building preview affordances instead of lift effects. A preview costs the same hundred milliseconds and returns actual information. It also fails gracefully: a visitor who never hovers, because they are on a phone or because they are tabbing, has lost nothing but a convenience.

The three rules I hold myself to

• The hover must be recoverable — moving away restores the resting state exactly
• The hover must never be the only route to the information
• The hover must not move anything the pointer is currently over

That third one gets broken constantly. A row that grows on hover pushes its own neighbours down, which moves the thing under your pointer, which changes what you are hovering, which is how you end up chasing a button across a page. If an element must change size, change it in a direction that does not displace the pointer.

What about touch

There is no hover on touch, and there never will be, and this is fine. Design the row so it works with no hover at all — a title, a date, a clear tap target of at least forty-four pixels. Then add the hover for the pointer that has one. An enhancement that only some visitors receive is not an inequality if nobody is missing information.

I have started thinking of it as a rehearsal. The hover is the click, performed quietly, with no consequences. If the rehearsal is honest, the performance is never a surprise.